<template>
	<view class="page">
		<view class="msg-item" v-for="item in msgList" :key="item.id">
			<view class="item-title">
				<view class="msg-title">【{{item.title}}】</view>
				<view>{{item.create}}</view>
			</view>
			<view class="msg-split-line"></view>
			<view>{{item.desc}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				param:{},
				msgList:[
					{
						title:"报名状态变更",
						desc:"报名状态变更"
					},
					{
						title:"报名状态变更",
						desc:"报名状态变更报名状态变更报名状态变报名状态变更报名状态变更报名状态变更报名状态变更"
					},
					{
						title:"报名状态变更",
						desc:"报名状态变更报名状态变更报名状态变更报名状态变更报名状态变名状态变更报名状态变更报名状态变更报名状态变更报名状态变名状态变更报名状态变更报名状态变更报名状态变更报名状态变更报名状态变更报名状态变更"
					}
				]
			};
		},
		onLoad(option){
			this.param.msgtype = option.msgtype;
			this.getMsgList()
		},
		methods:{
			getMsgList(){
				this.param.token = uni.getStorageSync("token");
				this.param.msgtype = 1;
				this.http.get({
					url:'/index.php/Wxapp/Msgtip/getList',
					data:this.param
				}).then(resp=>{
					this.msgList = resp.data.list;
					console.log("消息列表：",this.msgList)
				}).catch(err=>{
					console.log("消息列表失败：",err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.page{
		width: 100vw;
		min-height: 100vh;
		height: 100%;
		background-color: $global_bg_color;
		padding-top: 2rpx;
		.msg-item{
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 15rpx 10rpx;
			margin: 20rpx 15rpx;
			
			.item-title{
				display: flex;
				justify-content: space-between;
				.msg-title{
					font-weight: bold;
				}
			}
			.msg-split-line{
				height: 2rpx;
				background-color: $global_bg_color;
				margin: 10rpx -10rpx;
			}
		}
	}



</style>
